/**
 * 自定比较通用的topbar
 */
'use strict';
import React, {Component} from 'react';
import {Text, TouchableHighlight, Image, StyleSheet, View, ToastAndroid} from 'react-native';


class TopBar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            leftImgUrl: require('./img/left.png'), //image require必须加载一个静态的地址
            leftImgShow: true,
            midTitle: "维修",
            rightImgUrl: require('./img/repair_top.png'),
            rightImgShow: true,
        }
    }



    _leftImagClick() {
        if(this.props.leftImagClick){
            this.props.leftImagClick();
        }else{
            console.log("点击事件不存在");
        }

    }

    _rightImagClick() {
        if (this.props.rightImgClick) {
            this.props.rightImgClick();
        }else{
            console.log("点击事件不存在");
        }
    }


    render() {
        if (this.props.leftImgShow && this.props.rightImgShow) {//都显示
            return (
                <View style={styles.container}>
                    <TouchableHighlight
                        underlayColor={'#1b91ff'}
                        onPress={this._leftImagClick.bind(this)}
                    >
                        <Image
                            source={this.props.leftImgUrl}
                            style={styles.leftImage}
                        />
                    </TouchableHighlight>
                    <Text
                        style={styles.midText}
                    >
                        {this.props.midTitle}
                    </Text>

                    <TouchableHighlight
                        underlayColor={'#1b91ff'}
                        onPress={this._rightImagClick.bind(this)}
                    >
                        <Image
                            source={this.props.rightImgUrl}
                            style={styles.rightImage}
                        />
                    </TouchableHighlight>

                </View>
            );
        }else if(this.props.leftImgShow){//只显示左边
            return (
                <View style={styles.container}>
                    <TouchableHighlight
                        underlayColor={'#1b91ff'}
                        onPress={this._leftImagClick.bind(this)}
                    >
                        <Image
                            source={this.props.leftImgUrl}
                            style={styles.leftImage}
                        />
                    </TouchableHighlight>
                    <Text
                        style={styles.midText}
                    >
                        {this.props.midTitle}
                    </Text>
                </View>
            );
        }else if(this.props.rightImgShow){//只显示右边
            return (
                <View style={styles.container}>

                    <Text
                        style={styles.midText}
                    >
                        {this.props.midTitle}
                    </Text>

                    <TouchableHighlight
                        underlayColor={'#1b91ff'}
                        onPress={this._rightImagClick.bind(this)}
                    >
                        <Image
                            source={this.props.rightImgUrl}
                            style={styles.rightImage}
                        />
                    </TouchableHighlight>

                </View>
            );
        }else{ //默认只显示标题
            <Text
                style={styles.midText}
            >
                {this.props.midTitle}
            </Text>
        }
    }


}

var styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        backgroundColor: '#1b91ff',
        height: 49,
        alignItems: 'center'
    },
    leftImage: {
        marginLeft: 16,
        width: 17,
        height: 20,
    },
    rightImage: {
        marginRight: 16,
        width: 17,
        height: 20,
    },
    midText: {
        flex: 1,
        color: 'white',
        fontSize: 18,
        textAlign: 'center'
    },


});


module.exports = TopBar;